<template>
	<el-select
		v-model="value"
		:disabled="disabled"
		:remote-method="queryList"
		:size="size"
		:multiple="multiple"
		:type="type"
		filterable
		remote
		:clearable="clearable"
		:collapse-tags="collapseTags"
		style="width: 100%;"
		@change="handleChange"
	>
		<el-option v-for="item in dataList" :key="item.value" :label="item.label" :value="item.value" />
	</el-select>
</template>
<script>
import API from "common/src/api/graExamArrange/examStuManagement";
import UTILS from "common/src/utils/utils";
/**
 * 字典下拉框组件
 */
export default {
	name: "ExamSelect",
	props: {
		value: {
			required: true
		},
		disabled: {
			type: Boolean,
			default: false
		},
		multiple: {
			type: Boolean,
			default: false
		},
		collapseTags: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: ""
		},
		clearable: {
			type: Boolean,
			default: true
		},
		collapseTags: {
			default: true
		},
		type: {
			type: String,
			default: "room"
		},
		calendarId: {
			default: ""
		},
		examType: {
			default: ""
		},
		queryForm: {
			type: Object,
			default: {
				pageNum_: 1,
				pageSize_: 20,
				condition: {
					calendarId: "",
					examType: "",
					keyword: ""
				}
			}
		}
	},
	data() {
		return {
			dataList: []
			// queryForm: {
			// 	pageNum_: 1,
			// 	pageSize_: 20,
			// 	condition: {
			// 		calendarId: "",
			// 		examType: "",
			// 		keyword: ""
			// 	}
			// }
		};
	},
	computed: {},
	mounted() {
		this.init();
	},
	created() {
		if (this.multiple && !Array.isArray(this.value)) {
			this.$emit("input", []);
		}
		if (!this.multiple && Array.isArray(this.value)) {
			this.$emit("input", "");
		}
	},
	watch: {
		calendarId: {
			handler: function(newVal, oldVal) {
				this.init();
			}
		},
		examType: {
			handler: function(newVal, oldVal) {
				this.init();
			}
		}
	},
	methods: {
		handleChange(val) {
			this.$emit("input", val);
			this.$emit("change", val);
		},
		init() {
			if (this.type === "room") {
				API.listRoom(this.queryForm).then(res => {
					if (res.code == 200) {
						this.dataList = [];
						for (const item of res.data.list) {
							this.dataList.push({
								label: item.roomName,
								value: item.roomId,
								key: item.roomId
							});
						}
					}
				});
			} else {
				this.queryForm.condition.calendarId = this.calendarId;
				this.queryForm.condition.examType = this.examType;
				if (
					this.queryForm.condition.calendarId &&
					this.queryForm.condition.examType
				) {
					if (this.type === "stu") {
						API.listStudent(this.queryForm).then(res => {
							if (res.code == 200) {
								this.dataList = [];
								for (const item of res.data.list) {
									this.dataList.push({
										label:
											item.studentName +
											"(" +
											item.studentCode +
											")",
										value: item.studentCode,
										key: item.studentCode
									});
								}
							}
						});
					} else if (this.type === "course") {
						API.listCourse(this.queryForm).then(res => {
							if (res.code == 200) {
								this.dataList = [];
								for (const item of res.data.list) {
									this.dataList.push({
										label:
											item.courseName +
											"(" +
											item.courseCode +
											")",
										value:
											item.examInfoIds +
											"-" +
											item.courseCode,
										key: item.examInfoIds
									});
								}
							}
						});
					} else {
						return;
					}
				} else {
					return;
				}
			}
		},
		queryList(query) {
			this.queryForm.condition.keyword = query;
			this.loading = true;
			this.init();
		}
	}
};
</script>

<style scoped lang="scss">
</style>
